<template>
    <div>
        <el-form label-width="85px" :model="Customer" ref="Customer_refs" :rules="Customerrules">
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="合同编号" prop="CustomerNumber">
                        <el-input v-model="Customer.CustomerNumber" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="客户公司" prop="CustomerCompany">
                        <el-input v-model="Customer.CustomerCompany"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="税号" prop="DutyParagraph">
                        <el-input v-model="Customer.DutyParagraph"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="客户住址" prop="CustomerAddress">
                        <el-input v-model="Customer.CustomerAddress"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="电话" prop="CustomerPhone">
                        <el-input v-model="Customer.CustomerPhone"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="开户行" prop="OpeningBank">
                        <el-input v-model="Customer.OpeningBank"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="银行账号" prop="BankAccount">
                        <el-input v-model="Customer.BankAccount"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="姓名" prop="CustomerName">
                        <el-input v-model="Customer.CustomerName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="出生日期" prop="CustomerBirth">
                        <el-date-picker style="width: 100%"
                                        v-model="Customer.CustomerBirth"
                                        type="date"
                                        placeholder="出生日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="性别" prop="CustomerSex">
                        <el-radio-group v-model="Customer.CustomerSex">
                            <el-radio label="1">女</el-radio>
                            <el-radio label="0">男</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="公司地址" prop="CompanyAddress">
                        <el-input v-model="Customer.CompanyAddress"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="主营业务" prop="MainBusines">
                        <el-input v-model="Customer.MainBusines"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="客户行业" prop="CustomerIndustry">
                        <el-input v-model="Customer.CustomerIndustry"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="客户类型" prop="CustomerType">
                        <el-select placeholder="客户类型" style="width: 100%" v-model="Customer.CustomerType" @change="selectchange_event">
                            <el-option label="上游客户" value="1"></el-option>
                            <el-option label="下游客户" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="对接人" prop="Docker">
                        <el-select v-model="Customer.Docker" style="width: 100%">
                            <el-option label="无" :value="0"></el-option>
                            <el-option v-for="v in $store.state.AllUsers" :label="v.UserName" :value="v.Id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="对接项目" prop="DockingProject">
                        <el-select v-model="Customer.DockingProject" style="width: 100%">
                            <el-option label="无" :value="0"></el-option>
                            <el-option v-for="v in AllProject" :value="v.Id" :label="v.ProjectName"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="邮箱" prop="CustomerEmail">
                        <el-input v-model="Customer.CustomerEmail"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="微信号" prop="CustomerWeChat">
                        <el-input v-model="Customer.CustomerWeChat"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="备注" prop="CustomerNote">
                        <el-input v-model="Customer.CustomerNote"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col align="center">
                    <el-button type="success" @click="UpdataContract_event">立即提交</el-button>
                    <el-button type="warning" @click="Fromreset_event">重置</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "UpdataCustomer",
        props: {
            Customer_Template: {
                type: Object,
                required: true,
            },
            AllProject: {
                type: Array,
                required: true
            },
        },
        watch: {
            Customer_Template: function (val) {
                this.init(val)
            }
        },
        created() {
            this.init(this.Customer_Template)
        },
        data() {
            var checkPhone = (rule, value, callback) => {
                // const phoneReg =  /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/
                if (!value) {
                    return callback(new Error('电话号码不能为空'))
                }
                setTimeout(() => {
                    // if (phoneReg.test(value)) {
                    //     callback()
                    // } else {
                    //     callback(new Error('电话号码格式不正确'))
                    // }
                    var reg01 = /^(0|86|17951)?(13[0-9]|15[012356789]|17[01678]|18[0-9]|14[57])[0-9]{8}$/;
                    var reg02 = /^([0-9]{2,4}\-)([0-9]{1,7})+(\-[0-9]{1,4})?$/;
                    if(reg01.test(value) || reg02.test(value)) {
                        callback()
                    } else {
                        callback(new Error('电话号码格式不正确'))
                        return;
                    }
                }, 100)
            }
            return {
                Customer: {},
                Customerrules:{
                    CustomerSex:[  { required: true, message: '请选择性别', trigger: 'change' } ],
                    CustomerType:[  { required: true, message: '请选择客户类型', trigger: 'change' } ],
                    Docker:[  { required: true, message: '请选择对接人', trigger: 'change' } ],
                    CustomerPhone:[{ required: true, trigger: 'blur', validator: checkPhone}],
                    CustomerName:[{ required: true, message: '请选择性别', trigger: 'change' } ],
                }
            }
        },
        methods: {
            init(obj) {
                let newobj = JSON.parse(JSON.stringify(obj))
                this.Customer = newobj
            },
            //立即提交
            UpdataContract_event() {
                this.$refs["Customer_refs"].validate(vali=>{
                    if(vali){
                        let loadding = this.openLoading();
                        this.$http.post('Customer/UpdateCustomer', this.Customer).then(res => {
                            loadding.close();
                            if (res.data.IsSuccess) {
                                this.$message.success(res.data.Msg)
                                this.$parent.$parent.UpdataCustomer_dialog.dialog = false
                                this.$parent.$parent.formdata()
                            } else {
                                this.$message.warning(res.data.Msg)
                            }
                        })
                    }
                })
            },
            //重置
            Fromreset_event() {
                this.$refs['Customer_refs'].resetFields()
            },
            //生成编号
            selectchange_event(type) {
                if (type == this.Customer_Template.CustomerType) {
                    this.Customer.CustomerNumber = this.Customer_Template.CustomerNumber
                } else {
                    this.$http.post('Customer/NewCustomerType', { type: type }).then(res => {
                        this.Customer.CustomerNumber = res.data
                    })
                }
            },
        },
    }
</script>

<style scoped>

</style>
